<template>
  <div id="components-layout-yjx-basic">
    <a-layout>
      <!-- 容器布局的头部 -->
      <a-layout-header>
        <div class="logo">
          <router-link to="/">
            <img src="../assets/logo.png" width="" height="50" />
          </router-link>
        </div>
        <!-- 导航栏 -->
        <a-menu v-model="current" mode="horizontal" class="yjx-menu">
          <a-menu-item key="home" @click="goToHome()">
            <a-icon type="home" />首页
          </a-menu-item>
          <a-menu-item key="shoppingCart" @click="goToShoppingCart()">
            <a-icon type="shopping-cart" />服务中心
          </a-menu-item>
          <a-menu-item key="star" @click="goToFavorites()">
            <a-icon type="star" />收藏夹
          </a-menu-item>
          <a-menu-item key="appstore">
            <a href="/category"> <a-icon type="appstore" />家政分类</a>
          </a-menu-item>
          <!-- <a-menu-item key="shopping-unknown"
            ><a href="/shopping/guide"><a-icon type="file-unknown" /> 购物指南</a>
          </a-menu-item>-->
          <a-menu-item key="help">
            <a href="/help"><a-icon type="file-protect" />售后服务</a>
          </a-menu-item>
          <a-sub-menu>
            <span slot="title" class="submenu-title-wrapper">更多</span>
            <a-menu-item-group class="home-nav-options">
              <a-menu-item key="setting:1" disabled>联系方式 </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="setting:2"><a-icon type="phone" />电话(13888888888)
              </a-menu-item>
              <!-- <a-sub-menu key="setting:3">
                <span slot="title" class="submenu-title-wrapper"
                  ><a-icon type="wechat" />微信</span
                >
                <a-menu-item
                  style="width: 200px; height: 190px; margin: 0; padding: 0"
                  ><img
                    :src="$store.state.imgBaseUrl + 'img/qrCode/myvx.jpg'"
                    width="200"
                    height="190"
                /></a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="setting:4">
                <span slot="title" class="submenu-title-wrapper"
                  ><a-icon type="qq" />QQ(1888888)</span
                >
                <a-menu-item
                  style="width: 200px; height: 190px; margin: 0; padding: 0"
                  ><img
                    :src="$store.state.imgBaseUrl + 'img/qrCode/myqq.jpg'"
                    width="200"
                    height="190"
                /></a-menu-item>
              </a-sub-menu>-->
            </a-menu-item-group>
          </a-sub-menu>

          <a-menu-item class="login-register-item">
            <div class="login-register" v-if="isShowLogin">
              <a href="/login">登录</a>&nbsp;/
              <a href="/register" target="blank">注册</a>
            </div>
            <div class="user-avatar" v-else>
              <a-dropdown placement="bottomCenter" class="avatar-dropdown">
                <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                  <a-avatar size="large" icon="user" :src="avatar" alt="头像" />
                </a>
                <a-menu slot="overlay" class="login-register-down">
                  <a-menu-item>
                    <span @click="goToMyInfo()">我的资料</span>
                  </a-menu-item>
                  <a-menu-item>
                    <span @click="goToMyOrder()">我的订单</span>
                  </a-menu-item>
                  <a-menu-item>
                    <span @click="goToReceiptInfo()">我的地址</span>
                  </a-menu-item>
                  <a-menu-item>
                    <span @click="logout()">退出账号</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </a-menu-item>
        </a-menu>
      </a-layout-header>

      <!-- 容器布局的body部分 -->
      <a-layout-content>
        <router-view />
      </a-layout-content>

      <!-- 回到顶部 -->
      <back-top />

      <!-- 容器布局的底部 -->
      <a-layout-footer>
        <Footer />
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>

</script>

<style scoped>
/* 容器布局 */
#components-layout-yjx-basic {
  text-align: center;
}

#components-layout-yjx-basic .ant-layout-header {
  padding: 0;
  /* position: sticky; */
  /* top: 0px; */
  z-index: 100;
}

#components-layout-yjx-basic .ant-layout-footer {
  color: #000000a6;
}

#components-layout-yjx-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-yjx-basic .yjx-menu {
  line-height: 63px;
  width: 100%;
  text-align: left;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

#components-layout-yjx-basic .logo {
  width: 150px;
  height: 62px;
  float: left;
  margin-left: 8%;
  margin-right: 3%;
  font-size: 20px;
  font-weight: 700;
}

#components-layout-yjx-basic .logo img {
  margin-bottom: 6px;
}

#components-layout-yjx-basic .login-register-item {
  border: none !important;
  width: 40px;
  text-align: center;
  padding: 0;
  margin-left: 15%;
}

#components-layout-yjx-basic .logisn-register a {
  color: #000000a6;
}

#components-layout-yjx-basic .login-register a:hover {
  color: #1890ff;
}

.login-register-down {
  margin-top: 20px;
}
</style>
